javascript - 关于webgl框架Three.js-PHP中文网问答

按照书上的例子，把内容封装到函数中，看不到效果，麻烦大神看看那有问题。

<!DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="UTF-8">
 
        <title>the first webgl</title>
 
        <script src="js/three.js"></script>
        <script src="js/RequestAnimationFrame.js"></script>
        <style>
        #container{
            width: 95%;
            height: 80%;
            position: absolute;
        }
        body{
            background-color: lightblue;
        }
        </style>
 
        <script>
            
        var container = document.getElementById('container');
        var renderer;
        function initThree(){
            width = container.clientWidth;
            height = container.clinetHeight;
            renderer = new THREE.WebGLRenderer( {antialias: true} );
            renderer.setSize(width, height);
            container.appendChild(renderer.domElement);
        }
        var camera;
        function initCamera(){
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 4000);
            camera.position.x = 600;
 
                camera.position.y = 0;
 
                camera.position.z = 600;
 
                camera.up.x = 0;
 
                camera.up.y = 1;
 
                camera.up.z = 0;
 
                camera.lookAt({
 
                    x : 0,
 
                    y : 0,
 
                    z : 0
 
                });
        }
        var scene;
        function initScene(){
            scene = new THREE.Scene();
        }
        var light;
        function initLight(){
            light = new THREE.DirectionalLight(0xffffff, 1.5);
            light.position.set(0, 0, 1);
            scene.add(light);
        }
        var cube;
        function initObject(){
            var geometry = new THREE.CubeGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
        }
        function threeStart(){
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            run();
        }
        function run(){
            requestAnimationFrame(run);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }

        </script>
    </head>
 

 
    <body onload="threeStart();">
 
        <p id="container"></p>
 
    </body>
 
</html>

全部回复(3)

PHPz2017-04-11 09:52:58 3楼

把container的高宽设成绝对像素试试，感觉你这样写高度是0

赞 +0

添加回复

ringa_lee2017-04-11 09:52:58 2楼

请问是什么书呀？

PHPz2017-04-11 09:52:58 1楼

指出几点问题：

1、结构还没加载进来，获取不到container，控制台报错，没看么。。

var container = document.getElementById('container');

2、cube没有赋值啊，你把THREE.Mesh给mesh了，cube啥也没有啊，run函数里cube.rotation 转啥。。这里控制台也报错
3、height = container.clinetHeight; 你确定没写错么？这里是undefined
4、cube大小为1，camera.position.z为600，你看到的物体会特别小，因为摄像机离物体太远了，想变大就拉近摄像机，物体改大，cube为10，camera.position.z=100，改成这个大小。

预览效果：