0

我正在尝试创建一个应用程序，它将从 Blender/Maya 导出的 3D 模型导入到 ThreeJS 中。我已经安装了 Blender 并且三个 js 导出选项也即将到来，但是当我尝试加载导出的 JS 时（我也尝试将扩展名重命名为 json）它无法正常工作并显示空白屏幕。任何人都可以通过为此提供示例代码来帮助我吗？TIA。

问候，

尼勒什

4

3 回答 3

0 
        var camera, scene, renderer;
        var geometry, material, mesh;

        var controls;

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 5, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( 50, 50, 50 );

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = false;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            scene = new THREE.Scene();
            var light = new THREE.PointLight(0xffffff);
            light.position.set(-100,200,100);
            scene.add(light);

              // Load in the mesh and add it to the scene.
            var loader = new THREE.JSONLoader();
            loader.load( "models/testnew.js", function(geometry){
            var material = new THREE.MeshNormalMaterial({color: 0x55B663});
                mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);
            });
            //
            renderer = new THREE.CanvasRenderer();
            renderer.setSize( 1000, 600);
            document.body.appendChild( renderer.domElement );
        }

        function animate() {

            requestAnimationFrame( animate );

            controls.update();

            renderer.render( scene, camera );
            }
于 2013-09-17T14:11:35.293 回答
0

您是否尝试过 chawk 中的代码 - 只需更改为使用您的 test.js（检查文件夹路径）

如果您的函数 init() 中的代码是完整的，那么您似乎错过了一些事情

您已经创建了一个相机，创​​建了一个场景，创建了一个加载器，加载了一个文件并将网格添加到场景中

您需要将相机添加到场景中您还需要在场景中添加一些灯光

于 2013-09-13T10:20:14.303 回答
0

将 div 添加到正文

<div id="myScene"></div>

然后..

<script>
// global 
            var scene, renderer, camera, cube, controls;

            init();
            animate();

            function init() {

                // scene box
                var myScene = document.getElementById("myScene");

                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .01, 10000);
                camera.position.z = 500;

                var light = new THREE.AmbientLight(0xffffff); // soft white light
                scene.add(light);



                var directionalLight = new THREE.DirectionalLight(0xffffff);
                directionalLight.position.set(1, 1, 1).normalize();
                scene.add(directionalLight);


                /*  ==== OPTIONAL SPOTLIGHT ==== 
                var spotLight = new THREE.SpotLight(0xffffff);
                spotLight.position.set(100, 1000, 2000);

                spotLight.castShadow = true;

                spotLight.shadowMapWidth = 1024;
                spotLight.shadowMapHeight = 1024;

                spotLight.shadowCameraNear = 500;
                spotLight.shadowCameraFar = 4000;
                spotLight.shadowCameraFov = 30;

                scene.add(spotLight);
                */

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

                loader = new THREE.JSONLoader();

                loader.load("your_json_file.js", function (geometry, materials) {
                    mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial(materials));
                    scene.add(mesh);
                });

            }
            function animate() {
                requestAnimationFrame(animate);
                render();

            }
            function render() {

                renderer.render(scene, camera);
            }

</script>
于 2013-09-12T11:35:58.990 回答