1
안녕하세요 저는 webGL과 자바 스크립트를 배우고 있습니다. 내가 만든 한three.js에 새로 태어난이 공을 three.js에서 움직이는 법
이 그들은
공은 나머지 '참여'하는 것과 동일한 개체이야 ... WebGL을 현장 일을 three.js를, 그리고 실제로 생각하는 올 그래서 나는 다른 블렌더를 블렌더로 만들 것이다.
그래서
는 tribunal.js, 나는 ball.js하고 구조의 나머지 부분이 있다고 어떻게 것 I 모드이 경우 3D 환경을 따라 ball.js?
어쩌면 구조를 둘러싼 원과 비슷할 것입니다. 상수 루프. 너무 코드
는페이스트 빈 : 위치, 회전 및/또는 배율 :
http://paste.ubuntu.com/6549663/
<!doctype html>
<html lang="en">
<head>
<title>My 3D webGL experiment</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer;
init();
animate();
// Sets up the scene.
function init() {
// Create the scene and set the scene size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Create a renderer and add it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Create a camera, zoom it out from the model a bit, and add it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 20000);
camera.position.set(90,80,0);
scene.add(camera);
// Create an event listener that resizes the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH/HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColorHex(0xB5DBDB, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xf44fff);
light.position.set(200,200,200);
scene.add(light);
// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load("models/tribunal.js", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0xCC0000});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
// Add OrbitControls so that we can pan around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
// Renders the scene and updates the render as needed.
function animate() {
// Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>