0

我编写了这个基本文件来测试Three.jslib，但是当我尝试将renderer（一个元素）附加到$container（设置为$('#container')）时出现了问题。

<!DOCTYPE html>
<html lang='en'> 
<head>
    <meta charset="utf-8"> 
    <title>My first Three.js app</title>
    <style>
        #container {
            background: #000;
            width:400px;
            height: 300px;
        } 
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
    <script src="js\jquery\jquery-1.10.1.min.js"></script>
</head>
<body>

    <script src="js\three\three.min.js"></script>

    <script>
    //Set the scene size
    var WIDTH = 400, HEIGHT = 300;

    //Set some camera attributes
    var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

    //Get the DOM elements to attach to, assuming that code includes jQuery
    var $container = $('#container');

    //Create a WebGL renderer, scene, and a camera
    var renderer = new THREE.WebGLRenderer();
    var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    var scene = new THREE.Scene;

    //Add camera to the scene
    scene.add(camera);
    //The initial position of the camera is (0,0,0), so zoom out
    camera.position.z = 300;

    //Start the renderer
    renderer.setSize(WIDTH, HEIGHT);
    //attach the render-supplied DOM element
    $container.append(renderer.domElement);
    //document.body.appendChild(renderer.domElement);

    //Set up the sphere vars
    var radius = 50, segments = 16, rings = 16;
    //Create the sphere's material, such as Basic, Lambert, Phong etc
    var sphereMaterial = new THREE.MeshLambertMaterial( { color:0xCC0000 } );
    //Create a new mesh with sphere geoetry
    //Cover material to geometry
    var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(radius, segments, rings),
        sphereMaterial);
    //Add the mesh to the scene
    scene.add(sphere);

    //Create a point light
    var pointLight = new THREE.PointLight(0xFFFFFF);
    //Set the pointlight position
    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 130;
    //Add the pointLight to the scene
    scene.add(pointLight)

    //drender
    renderer.render(scene, camera);

    /*function render() {
        requestAnimationFrame(render);

        renderer.render(scene,camera);
    }
    render();*/

    </script>

</body>
</html>

我发现 有什么问题$container.append(renderer.domElement)。为什么不能container.append(renderer.domElement)显示球体但document.body.appendChild(renderer.domElement)可以？

控制台输出THREE.WebGLRenderer 58，是什么意思？

4

1 回答 1

0

我认为使用 jQuery 来创建和定位一个 div 元素比必要的努力要多。相反，请尝试：

container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );

有关介绍性示例的集合（源代码中有很多注释），请查看我的集合：

http://stemkoski.github.io/Three.js/

特别是“Hello World”示例：

http://stemkoski.github.io/Three.js/HelloWorld.html

于 2013-06-13T20:58:45.280 回答