Question

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

问候，

NileshW

Answer 1

在身体上添加一个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>

Answer 2

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

如果函数init（）中的代码完成，那么看起来你错过了几件事

您已经创建了一个摄像头，创建了一个场景，创建了一个加载器，加载了一个文件并为场景添加了网格

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

Answer 3

        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 );
            }

导入从Threejs中的Blender / maya导出的3D模型，并使用CanvasRenderer for iPad进行渲染

3 个答案: