JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script src="http://eskel.cz/js/sphere5.js"></script>
CoffeeScript
mesh = null
clock = new THREE.Clock()
scene = new THREE.Scene()
projector = new THREE.Projector()
raycaster = new THREE.Raycaster()
pointer = new THREE.Vector2()
red = new THREE.Color 1, 0, 0
blue = new THREE.Color 0, 0, 1
# Resize
onWindowResize = ->
windowHalfX = window.innerWidth / 2
windowHalfY = window.innerHeight / 2
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize window.innerWidth, window.innerHeight
raycaster limit offset = (00x925463);
transparency = true;
# Geometry
loadingFinished = (geometry) ->
material = new THREE.MeshLambertMaterial
color: 0x0000ff
skinning: true
mesh = new THREE.SkinnedMesh geometry, material
scene.add mesh
anim = new THREE.Animation mesh, geometry.animations[0]
anim.play()
loader = new THREE.JSONLoader()
result = loader.parse model
loadingFinished result.geometry
# Raytracing
getPointerPosition = (eventData) ->
rect = renderer.domElement.getBoundingClientRect()
pointer.x = eventData.clientX - rect.left
pointer.y = eventData.clientY - rect.top
return pointer
getIntersections = (pointer) ->
x = ( pointer.x / window.innerWidth ) * 2 - 1
y = ( pointer.y / window.innerHeight ) * -2 + 1
vector = new THREE.Vector3 x, y, 1
projector.unprojectVector vector, camera
direction = vector.sub(camera.position).normalize()
raycaster.set @camera.position, direction
return raycaster.intersectObject mesh
raytrace = (eventData) ->
pointer = getPointerPosition eventData
obj = getIntersections pointer
if obj.length > 0
mesh.material.color = red
else
mesh.material.color = blue
# Camera
window.camera = new THREE.PerspectiveCamera 50, window.innerWidth / window.innerHeight, 1, 5000
camera.position.set 100, 0, 0
camera.lookAt mesh.position
scene.add camera
# Lights
light = new THREE.DirectionalLight 0xffffff
light.position.set 1, 1, 1
scene.add light
# Renderer
renderer = new THREE.WebGLRenderer
antialiasing:...