Question

参考this video，我似乎无法看到应该在这里的立方体。

代码导致这两个错误：

DEPRECATED: THREE.CubeGeometry is deprecated. Use THREE.BoxGeometry instead. three.min.js:634
Uncaught ReferenceError: materials is not defined

代码：

<title>My first three.js app</title>
</head>
<body>
<script src="C:\Users\123303G\Desktop\Webpage\three.min.js"></script>
<script src="C:\Users\123303G\Desktop\Webpage\TrackballControls.js"></script>
<script>
    // Our Javascript will go here.
    var camera, controls, scene, renderer;

    init();
    animate();

    function init() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 500;

        controls = new THREE.TrackballControls(camera);
        controls.addEventListener('change', render);

        scene = new THREE.Scene();

        var geometry = new THREE.CubeGeometry(100, 100, 100);
        var material = new THREE.MeshNormalMaterial();

        var mesh = new THREE.Mesh(geometry, materials);
        scene.add(mesh); 

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement);
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
    }

    function render() {
        renderer.render( scene, camera );
    }
</script>

</body>
</html>

Answer 1

问题1：您的一种方法即THREE.CubeGeometry已弃用，这意味着您应将其切换为错误建议的内容：THREE.BoxGeometry。做：

var geometry = new THREE.BoxGeometry(100,100,100);

而不是：

var geometry = new THREE.CubeGeometry(100,100,100);

请参阅Three.js referece

问题2：在另一个错误你有一个错字。您使用materials代替material。做：

var mesh = new THREE.Mesh( geometry, material);

而不是：

var mesh = new THREE.Mesh( geometry, materials);

Answer 2

嗯，我相信你只需要删除＆＃39;这个函数调用的材料：

   var mesh = new THREE.Mesh( geometry, materials);

您已定义变量＆＃34; material＆＃34;，但未定义＃34; material＆＃34;，这是Uncaught ReferenceError的含义。这个错误就是showstopper。

使用JS在HTML上进行3D模型旋转

2 个答案: