plunkerでthree.js その6

概要

plunkerでthree.jsやってみた。
THREE.DragControls、やってみた。

写真

サンプルコード

const renderer = new THREE.WebGLRenderer()
renderer.setSize(400, 400)
document.body.appendChild(renderer.domElement)
const scene = new THREE.Scene()
scene.add(new THREE.AxesHelper(5))
const light = new THREE.PointLight(0xffffff, 100)
light.position.set(10, 10, 10)
scene.add(light)
const camera = new THREE.PerspectiveCamera(75, 400 / 400, 0.1, 1000)
camera.position.z = 3
const geometry = new THREE.BoxGeometry()
const material = [
    new THREE.MeshPhongMaterial({ 
        color: 0xff0000, 
        transparent: true 
    }),
    new THREE.MeshPhongMaterial({ 
        color: 0x00ff00, 
        transparent: true 
    }),
    new THREE.MeshPhongMaterial({ 
        color: 0x0000ff, 
        transparent: true 
    })
]
const cubes = [new THREE.Mesh(geometry, material[0]), new THREE.Mesh(geometry, material[1]), new THREE.Mesh(geometry, material[2])]
cubes[0].position.x = -2
cubes[1].position.x = 0
cubes[2].position.x = 2
cubes.forEach((c) => scene.add(c))
const controls = new THREE.DragControls(cubes, camera, renderer.domElement)
window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = 400 / 400
    camera.updateProjectionMatrix()
    renderer.setSize(400, 400)
    render()
}
function animate() {
    requestAnimationFrame(animate)
    cubes[0].rotation.x += 0.01
    cubes[0].rotation.y += 0.011
    cubes[1].rotation.x += 0.012
    cubes[1].rotation.y += 0.013
    cubes[2].rotation.x += 0.014
    cubes[2].rotation.y += 0.015
    renderer.render(scene, camera)
}
animate()

成果物

以上。