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://s1004games.com

[출처] https://github.com/josdirksen/threejs-cookbook/blob/master/03-camera/03.10-select-an-object-in-the-scene.html

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
1	jQuery Mobile Form Example	졸리운_곰	2018.09.04	428

첫 페이지 1 끝 페이지

쓰기

태그

WebGL, Three.js and Babylon.js threejs-cookbook/03-camera/03.10-select-an-object-in-the-scene.html

threejs-cookbook/03-camera/03.10-select-an-object-in-the-scene

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com