- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
WebGL, Three.js and Babylon.js threejs-cookbook/03-camera/03.10-select-an-object-in-the-scene.html
2017.05.31 22:05
threejs-cookbook/03-camera/03.10-select-an-object-in-the-scene
<!DOCTYPE html>
<html>
<head>
<title>03.10 - Selecting objects</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/dat.gui.min.js"></script>
<script type="text/javascript" src="../libs/Projector.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
var cube;
var controls;
var step = 0;
var scalingStep = 0;
var sphere;
var cylinder;
var renderer;
var camera;
var scene;
// once everything is loaded, we run our Three.js stuff.
function init() {
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
var projector = new THREE.Projector();
document.addEventListener('mousedown', onDocumentMouseDown, false);
// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(200, 200, 40, 40);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
planeMaterial.map = THREE.ImageUtils.loadTexture("../assets/textures/camo_cloth_multicam_2048.jpg");
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15
plane.position.y = 0
plane.position.z = 0
// add the plane to the scene
scene.add(plane);
// create a cube
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cubeMaterial.map = THREE.ImageUtils.loadTexture("../assets/textures/lava.png");
// position the cube
cube.position.x = -19;
cube.position.y = 15;
cube.position.z = 0;
// add the cube to the scene
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
sphereMaterial.map = THREE.ImageUtils.loadTexture("../assets/textures/wood_1-1024x1024.png");
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// position the sphere
sphere.position.x = 20;
sphere.position.y = 0;
sphere.position.z = 2;
// add the sphere to the scene
scene.add(sphere);
var cylinderGeometry = new THREE.CylinderGeometry(2, 2, 20);
var cylinderMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
cylinderMaterial.map = THREE.ImageUtils.loadTexture("../assets/textures/marble.jpg");
cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder.position.set(0, 0, 1);
scene.add(cylinder);
// position and point the camera to the center of the scene
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
scene.add(spotLight);
// add the output of the renderer to the html element
document.body.appendChild(renderer.domElement);
// call the render function
controls = new function () {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
this.scalingSpeed = 0.03;
this.showRay = false;
}
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
gui.add(controls, 'scalingSpeed', 0, 0.5);
gui.add(controls, 'showRay').onChange(function (e) {
if (tube) scene.remove(tube)
});
render();
}
function render() {
// rotate the cube around its axes
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;
// bounce the sphere up and down
step += controls.bouncingSpeed;
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
// scale the cylinder
scalingStep += controls.scalingSpeed;
var scaleX = Math.abs(Math.sin(scalingStep / 4)) + 0.5;
var scaleY = Math.abs(Math.cos(scalingStep / 5)) + 0.5;
var scaleZ = Math.abs(Math.sin(scalingStep / 7)) + 0.5;
cylinder.scale.set(scaleX, scaleY, scaleZ);
// render using requestAnimationFrame
renderer.render(scene, camera);
requestAnimationFrame(render);
}
var projector = new THREE.Projector();
var tube;
function onDocumentMouseDown(event) {
var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects([sphere, cylinder, cube]);
if (intersects.length > 0) {
intersects[0].object.material.transparent = true;
if (intersects[0].object.material.opacity === 0.5) {
intersects[0].object.material.opacity = 1;
} else {
intersects[0].object.material.opacity = 0.5;
}
var points = [];
points.push(new THREE.Vector3(camera.position.x, camera.position.y - 0.2, camera.position.z));
points.push(intersects[0].point);
var mat = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: true, opacity: 0.6});
var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 60, 0.001);
if (tube) scene.remove(tube);
if (controls.showRay) {
tube = new THREE.Mesh(tubeGeometry, mat);
scene.add(tube);
}
}
}
window.onload = init;
</script>
</body>
</html>
|
[출처] https://github.com/josdirksen/threejs-cookbook/blob/master/03-camera/03.10-select-an-object-in-the-scene.html
본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
