如何解决如何在我的JavaScript项目中使用THREE.MeshLine?
在寻找一种创建宽度改变的three.js
行的方法时,我遇到了this article,它建议使用here中的THREE.MeshLine
类。但是,当尝试遵循有关如何在脚本中使用它的文档时,出现错误:
require.js:5 Uncaught Error: Module name "three" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at makeError (require.js:5)
at Object.o [as require] (require.js:5)
at requirejs (require.js:5)
at test_line.html:13
以下是我在脚本中使用的代码行:
<html>
<head>
<script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
<script src="https://raw.githubusercontent.com/spite/THREE.MeshLine/master/src/THREE.MeshLine.js"></script>
<title>Test</title>
</head>
<body>
<script>
var THREE = require( 'three' );
var MeshLine = require( 'three.meshline' );
...
我想念什么吗? (提示:我是使用javascript的初学者)
我也尝试遵循建议HERE,但是在脚本部分添加 type="module"
后,我得到了一个错误container is not defined
。
这是浏览器窗口中一行的完整,独立,静态,简单,直接工作的html示例。如果答案中包含完整的,独立的,静态的,简单的,直接的工作示例,我将不胜感激!
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
<title>Test</title>
</head>
<body>
<script>
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,10000);
camera.position.set(0,150);
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
clearAlpha: 1
});
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0xcaffee,1);
document.body.appendChild(renderer.domElement);
var material = new THREE.LineBasicMaterial( { color: 0xff0000,linewidth: 10000000 } );
var points = [];
points.push( new THREE.Vector3(-50,0 ) );
points.push( new THREE.Vector3( 50,0 ) );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var line = new THREE.Line( geometry,material );
scene.add( line );
renderer.render( scene,camera );
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
</script>
</body>
</html>
解决方法
您链接的Meshline存储库将不再维护,并且不适用于当前的Three.js版本。 这是我当前使用的维护的分叉: https://github.com/ryanking1809/threejs-meshline
如果将问题中的链接替换为:
https://unpkg.com/threejs-meshline@2.0.11/src/index.js
编辑:带有完整的工作示例:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
<script src="https://unpkg.com/threejs-meshline@2.0.11/src/index.js"></script>
<title>Test</title>
</head>
<body>
<script>
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,10000);
camera.position.set(0,150);
scene = new THREE.Scene();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
clearAlpha: 1
});
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0xcaffee,1);
document.body.appendChild(renderer.domElement);
let points = [];
points.push( new THREE.Vector3(-50,0 ) );
points.push( new THREE.Vector3( 50,0 ) );
const line = new MeshLine();
line.setVertices(points);
const material = new MeshLineMaterial();
const mesh = new THREE.Mesh( line,material );
scene.add( mesh );
renderer.render( scene,camera );
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。