<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three@0.139.2",
"three/": "https://cdn.skypack.dev/three@0.139.2/"
}
}
</script>
body{
overflow: hidden;
margin: 0;
}
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(5, 8, 13).setLength(10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
let grid = new THREE.GridHelper(100, 100);
grid.rotation.x = -Math.PI * 0.5;
scene.add(grid);
let objData =[
{
position: {x: 1, y: 2, z: 1},
rotation: {x: 0, y: 0, z: Math.random() * Math.PI},
scale: {x: 6, y: 2, z: 3}
},
{
position: {x: -2, y: -3, z: -0.5},
rotation: {x: 0, y: 0, z: Math.random() * Math.PI},
scale: {x: 4, y: 2, z: 0.5}
},
];
let g = new THREE.BufferGeometry();
g.setAttribute("position", new THREE.Float32BufferAttribute([
1, 1, 1,
1,-1, 1,
-1,-1, 1,
-1, 1, 1,
1, 1,-1,
1,-1,-1,
-1,-1,-1,
-1, 1,-1
], 3));
g.setIndex([0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7]);
g.scale(0.5, 0.5, 0.5);
let m = new THREE.LineBasicMaterial({color: "aqua"});
objData.forEach(od => {
let box = new THREE.LineSegments(g, m);
box.position.copy(od.position);
box.rotation.setFromVector3(od.rotation);
box.scale.copy(od.scale);
scene.add(box)
})
window.addEventListener("resize", () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
});
renderer.setAnimationLoop((_) => {
renderer.render(scene, camera);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.