ThreeJS 시리즈 자습서 - Lesson4
코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Three.js tutorial - Lesson 04</title>
<style>body{background:#000000;overflow:hidden;}</style>
<script src="js/r69/three.js"></script>
<script src="js/r69/Detector.js"></script>
<script src="js/r69/CanvasRenderer.js"></script>
<script src="js/r69/Projector.js"></script>
</head>
<body>
<script>
var scene,camera,mesh,renderer;
if(Detector.webgl){
renderer = new THREE.WebGLRenderer({antialias:true});
}else{
renderer = new THREE.CanvasRenderer();
}
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position); //
//scene.add(camera);
var boxGeometry = new THREE.BoxGeometry(2.0, 2.0, 2.0);
var texture = new THREE.ImageUtils.loadTexture("images/NeHe.jpg"); //
var boxMaterial = new THREE.MeshBasicMaterial({map:texture}); //
var mesh = new THREE.Mesh(boxGeometry, boxMaterial);
mesh.position.set(0, 0, 4);
scene.add(mesh);
var xRotation = 0;
var yRotation = 0;
var zRotation = 0;
function render(){
xRotation += 0.03;
yRotation += 0.02;
zRotation += 0.04;
mesh.rotation.set(xRotation, yRotation, zRotation);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>부주: 현재 필자가 사용하는three.js 버전 r69
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
leaflet를 단련한다. 그 6leaflet을 단련해 보았다. webgl에서 써 보았다. 이상....
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
