Three.js tests

Source code

<div>
<script type="text/javascript"src="https://cdn.jsdelivr.net/npm/three@v0.157.0/build/three.min.js"></script>
<script type="text/javascript">
// Sceneconst scene = new THREE.Scene();
// Objectconst geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });const mesh = new THREE.Mesh(geometry, material);const linegeo = new THREE.EdgesGeometry(mesh.geometry, 30);const linemat = new THREE.LineBasicMaterial({color:"white", linewidth: 2});const wireframe = new THREE.LineSegments(linegeo, linemat);wireframe.renderOrder = 1;mesh.add(wireframe);scene.add(mesh);
// Cameraconst camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000 );camera.position.z = 3;scene.add(camera);
// Axes Helperconst axesHelper = new THREE.AxesHelper(2);scene.add(axesHelper);
// Rendererconst renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );renderer.setAnimationLoop(animate);function animate(){ mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera);}</script></p></div>

Use your mouse to move around (LMB orbit, RMB pan, WHEEL zoom)

Source code

<div><script type="text/javascript"src="https://cdn.jsdelivr.net/npm/three@v0.147.0/build/three.min.js"></script><script type="text/javascript"src="https://cdn.jsdelivr.net/npm/three@v0.147.0/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript">// with thanks to PavelBoytchev from the Three.js discourse// see: https://discourse.threejs.org/t/add-orbitcontrols-to-a-google-sites-page-embed-code/91906/2 // Sceneconst scene = new THREE.Scene();
// Objectconst geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshBasicMaterial({ color: 0x00cccc });const mesh = new THREE.Mesh(geometry, material);const linegeo = new THREE.EdgesGeometry(mesh.geometry, 30);const linemat = new THREE.LineBasicMaterial({color:"white", linewidth: 2});const wireframe = new THREE.LineSegments(linegeo, linemat);wireframe.renderOrder = 1;mesh.add(wireframe);scene.add(mesh);
// Cameraconst camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );camera.position.z = 3;scene.add(camera);
// Axes Helperconst axesHelper = new THREE.AxesHelper(2);scene.add(axesHelper);
// Rendererconst renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
// OrbitControls Initialization const controls = new THREE.OrbitControls( camera, renderer.domElement );
// Animation Looprenderer.setAnimationLoop(animate);function animate() { mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; // Update controls before rendering for damping to work properly // controls.update(); renderer.render(scene, camera);}</script></div>

Page updated

Google Sites

Report abuse