Three.js 导入从Blender/maya导出的三维模型，并使用CanvasRenderer for iPad进行渲染

我正在尝试创建一个应用程序，将从Blender/Maya导出的3D模型导入ThreeJS。我已经安装了Blender和three js导出选项，但是当我尝试加载导出的js时（我也尝试将扩展名重命名为json），它不工作，并显示空白屏幕。有人能帮我提供一个示例代码吗？ 蒂亚

问候,

NileshW

在主体中添加一个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>

//全球的
var场景、渲染器、摄影机、立方体、控件；
init（）；
制作动画（）；
函数init（）{
//场景框
var myScene=document.getElementById（“myScene”）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，.0110000）；
摄像机位置z=500；
var light=新的三个。环境光（0xffffff）；//柔和的白光
场景。添加（灯光）；
var方向灯=新的三个方向灯（0xffffff）；
directionalLight.position.set（1,1,1）.normalize（）；
场景。添加（方向光）；
/*===可选聚光灯===
var spotLight=新的三个聚光灯（0xffffff）；
聚光灯位置设置（10010002000）；
spotLight.castShadow=true；
spotLight.shadowMapWidth=1024；
spotLight.shadowmapeight=1024；
spotLight.shadowCameraNear=500；
spotLight.shadowCameraFar=4000；
spotLight.shadowCameraFov=30；
场景。添加（聚光灯）；
*/
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
appendChild（renderer.domeElement）；
loader=new THREE.JSONLoader（）；
load（“your_json_file.js”），函数（几何体、材质）{
网格=新三点网格（几何体，新三点网格材质（材质））；
场景。添加（网格）；
});
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

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

如果函数init（）中的代码已完成，那么看起来您遗漏了一些内容

您已经创建了摄影机、场景、加载程序、加载文件并将网格添加到场景中

您需要将摄影机添加到场景中

---

你还需要在场景中添加一些灯光

Dave-我已经删除了这篇文章。请回复这篇文章。这里有三个加载程序的例子。请检查它们！var装载机，网状；var容器、摄影机、场景、渲染器；函数init（）{container=document.createElement（'div'）；document.body.appendChild（container）；camera=new THREE.camera（70，window.innerWidth/window.innerHeight，11000）；camera.position.y=150；camera.target.position.y=150；scene=new THREE.scene（）；loader=new THREE.JSONLoader（）；loader.load（“test.js”，函数（几何体，材质）{mesh=new THREE.mesh（几何体，新THREE.MeshPhongMaterial（材质））；scene.add（mesh）；render1（）；}函数render1（）{renderer=new THREE.CanvasRenderer（）；renderer.setSize（window.innerWidth，window.innerHeight）；container.appendChild（renderer.doElement）；renderer.render（scene，camera）；}请告诉我缺少什么。谢谢！我编辑了我的示例，如果你的.js文件在根目录下，它应该可以工作。我尝试了上面的代码，它也可以工作（因为我使用的是CanvasRenderer，而不是iPad不支持的WebGLRenderer。我对此有一个问题。当我在以下条件下尝试上面的代码时，它不起作用：1.当我在Blender中导入obj/3ds文件并导出ThreeJS时，它不会在屏幕上显示任何内容。上面的代码只适用于示例Blender模型，而不适用于任何导入的m。）odels。你知道我在哪里可以找到其他的定制模型吗？这部分是回答，不是问题。你需要写一篇新文章。

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