JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/modifiers/BufferSubdivisionModifier.js"></script>
CSS
body {
background: #202020;
margin: 0;
overflow: hidden;
}
JavaScript
var scene, camera, renderer;
var controls;
var tmpPosition;
var object, volume;
var raycaster, origin, direction;
var intersects, volumePoint, volumeNormal, helper;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x202020);
camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 1000.0);
camera.position.set(-6.0, 8.0, 12.0);
tmpPosition = new THREE.Vector3();
renderer = new THREE.WebGLRenderer({antialias: true});
controls = new THREE.OrbitControls(camera, renderer.domElement);
// Setup raycasting
raycaster = new THREE.Raycaster();
origin = new THREE.Vector3();
direction = new THREE.Vector3();
intersects = [];
volumePoint = new THREE.Vector3();
volumeNormal = new THREE.Vector3();
helper = new THREE.Mesh(
new THREE.SphereBufferGeometry(0.05),
new THREE.MeshBasicMaterial({
color: 0x00ff00
})
);
scene.add(helper);
var width = 1.5;
var height = 1.5;
var depth = 6.0;
var padding = 4.0;
object = new THREE.Mesh(
new THREE.BoxBufferGeometry(width, height, depth),
new THREE.MeshPhongMaterial({
color: 0xffffff,
transparent: true,
opacity: 0.5,
side: THREE.DoubleSide
})
);
scene.add(object);
var geometry = new THREE.BoxGeometry(width + padding, height + padding, depth + padding, 2, 2, 2);
var modifier = new THREE.BufferSubdivisionModifier(6);
var smooth = modifier.modify(geometry);
volume = new THREE.Mesh(
smooth,
new THREE.MeshBasicMaterial({
color: 0x404080,
wireframe: true,
visible: true,
side: THREE.DoubleSide
})
);
scene.add(volume);
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
...