three.js dev template - module
HTML
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.145/build/three.module.js"
}
}
</script>
CSS
body {
margin: 0px;
}
JavaScript
import * as THREE from 'three';
import {
OrbitControls
} from "https://unpkg.com/three@0.145/examples/jsm/controls/OrbitControls.js";
import {
DecalGeometry
} from "https://unpkg.com/three@0.145/examples/jsm/geometries/DecalGeometry.js";
var mesh, renderer, scene, camera, controls;
var mouse, raycaster, helper, decalMaterial;
init();
animate();
let moved = false;
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(20, 20, 20);
// controls
controls = new OrbitControls(camera, renderer.domElement);
// ambient
scene.add(new THREE.AmbientLight(0x222222));
// light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 0);
scene.add(light);
// geometry
var geometry = new THREE.BoxGeometry(10, 10, 10);
// material
var material = new THREE.MeshPhongMaterial({
color: 0x00ffff,
flatShading: true
});
// mesh
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// decal related stuff
mouse = new THREE.Vector2();
raycaster = new THREE.Raycaster();
helper = new THREE.Object3D();
/* decalMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, depthWrite: false, polygonOffset: true, polygonOffsetFactor: - 4, } ); */
const textureLoader = new THREE.TextureLoader()
textureLoader.crossOrigin = "Anonymous"
var texture = textureLoader.load('https://pbs.twimg.com/media/DLOQ2ACVAAEt0_b.png')
decalMaterial = new THREE.MeshLambertMaterial({
map: texture,
transparent: true,
depthTest: true,
depthWrite: false,
polygonOffset: true,
polygonOffsetFactor: -4,
});
// decalMaterial = new...