我写了这个基本文件来测试Three.js lib，但是当我尝试将renderer（一个元素）附加到$container（设置为{{1}时出现问题}}）。
$('#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)，这是什么意思？
答案 0 :(得分：0)
我认为使用jQuery来创建和定位div元素比不必要更省力。相反，尝试：
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
有关介绍性示例的集合（源代码中有大量注释），请查看我的收藏集：
http://stemkoski.github.io/Three.js/
，特别是“Hello World”示例：