JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r57/three.min.js"></script>
<p>A cube and two octagonal prisms (one wireframe, the other not). On mouseover the intersected object should change colour, however this only works for the cube</p>
CSS
body {
font-family: sans-serif;
}
JavaScript
var container, stats;
var camera, controls, scene, projector, renderer;
var geometry, material, mesh, INTERSECTED;
var objects = [];
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3();
init();
animate();
function init() {
// Create a container, camera & scene
container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.x = 0;
camera.position.y = 400;
camera.position.z = 800;
camera.lookAt(scene.position);
// Create items which will be present in the scene
var items = [];
// Function which creates the octagonal prism mesh is at the bottom
items.push(createOctagon(175, 175, 150, 0, 0, true));
items.push(createOctagon(175, 75, 150, 0, 200, false));
// Create a cube in the same way for comparison
var cube = new THREE.Object3D();
var cubeGeometry = new THREE.CubeGeometry(175, 175, 175);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: 0x333333,
wireframe: true,
opacity: 1,
transparent: true
});
var cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
cubeMesh.position.set(-150, 150, 0);
cube.add(cubeMesh);
items.push(cube);
// Add objects to scene, and intersection object array
_.each(items, function (item) {
scene.add(item);
// Add to our list of objects for intersection mapping
_.each(item.children, function (child) {
if (child instanceof THREE.Mesh) {
objects.push(child)
}
});
});
// Build projector & renderer and attach
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
// Events
...