0

libをテストするためにこの基本的なファイルを書きましたが、 (に設定されている) に (要素) をThree.js追加しようとすると何か問題が発生します。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 に答える