时间戳

首页 > 解决方案 > 三.js定位问题和coneGeometry错误

javascript - 三.js定位问题和coneGeometry错误

问题描述

我正在尝试通过将不同的形状添加到一个大组并将它们定位在特定轴上来构建一个火箭模型。

当我尝试使用

rocketConeMesh.position.y = 15;

形状根本不动，我试图把rocketCone（火箭船的鼻子）放在上面，rocketBody然后把它们放在同一个组下。

我收到以下错误消息

"THREE.Object3D.add: object not an instance of THREE.Object3D. "

为coneGeometry对象。

我的代码如下：

<script type="text/javascript">
            // create a scene, that will hold all our elements such as objects, cameras and lights.
            var scene = new THREE.Scene();

            // create a camera, which defines where we're looking at.
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            // create a render and set the size
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            window.addEventListener('resize', function()
            {
                var width = window.innerWidth;
                var height = window.innerHeight;
                renderer.setSize(width, height);
                camera.aspect = width / height;
                camera.updateProjectionMatrix();

            } );

          controls = new THREE.OrbitControls(camera, renderer.domElement);

            // create the object group that contains all the sub-shapes
            var rocketGroup = new THREE.Object3D();
            scene.add(rocketGroup);

            //The object below is the top cone of the rocket
            var rocketCone = new THREE.ConeGeometry(6, 10, 6);
            var material = new THREE.MeshBasicMaterial({color: 0xcccccc, wireframe: true});
            var cone = new THREE.Mesh(rocketCone, material);
            rocketConeMesh = new THREE.Mesh(rocketCone,new THREE.MeshPhongMaterial())

            scene.add(cone);
            //Specify the position of the rocket cone
            rocketConeMesh.position.y = 15;

            //Add the rocketCone to the lowpolyRocket group
            rocketGroup.add(rocketCone);

            /******************************************************************************************************************/

            //var rocketBody = new THREE.CylinderGeometry( 5, 5, 20, 32 );
            //var material = new THREE.MeshBasicMaterial({color: 0xcccccc, wireframe:false});
            //var cylinder = new THREE.Mesh(rocketBody, material);
            //scene.add(cylinder);

            // position and point the camera to the center of the scene
            camera.position.x = -30;
            camera.position.y = 20;
            camera.position.z = 30;
            camera.lookAt(scene.position);

            // game logic    
            var update = function ( )
            {
                //cone.rotation.x += 0.01;
                //cone.rotation.y += 0.005;
            };
            // draw scene    
            var render = function ( )
            {
                renderer.render(scene, camera);
            };



            // run game loop (update, render, repeat)
            var GameLoop = function ( )
            {
                requestAnimationFrame(GameLoop);
                update( );
                render( );
            };
            GameLoop( );



        </script>

标签： javascriptthree.js

解决方案

RocketGroup.add(rocketCone);

此代码无效，因为无法将 的实例添加ConeGeometry到Object3D. 尝试将您的代码更改为以下内容：

rocketGroup.add(rocketConeMesh);

现在您将网格（派生自THREE.Object3D）添加到rocketGroup. 它现在是场景图的一部分，改变它的转换应该可以工作。

顺便说一句：我不明白你为什么用你的rocketCone几何体创建两个网格。我想你可以删除cone变量。

推荐阅读