Three.js base
A base/starter fiddle for Three.js
by realhunts
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r95/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://preview.babylonjs.com/recast.js"></script>
<script src="https://preview.babylonjs.com/babylon.max.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
CSS
body {
padding: 0;
margin: 0;
}
canvas {
display: block;
}
JavaScript
var camera, scene, renderer, mesh, material, stats;
var mixer;
var clock = new THREE.Clock();
init();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer({
antialias: false
});
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
// Create scene.
scene = new THREE.Scene();
// Create material
material = new THREE.MeshPhongMaterial();
// Create cube and add to scene.
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
//scene.add(mesh);
var loader = new THREE.GLTFLoader();
loader.setCrossOrigin( 'anonymous' );
var scale = 90;
var url = "https://cdn.glitch.com/e1f07ec4-c6d7-451f-9b46-e49295350009%2Flevel.glb?v=1571915243652";
// var url = "https://cdn.glitch.com/b9ca1e40-f4f5-44ae-83ec-5e8506a9a671%2FSoldier.glb?1543735206862";
loader.load(url, function (data) {
gltf = data;
var object;
if ( gltf.scene !== undefined ) {
object = gltf.scene; // default scene
} else if ( gltf.scenes.length > 0 ) {
object = gltf.scenes[0]; // other scene
}
object.scale.set(scale, scale, scale);
/*setTimeout(()=>{
data.scene.traverse((child) => {
// if (child instanceof THREE.Mesh) {
// child.geometry.scale(.1, .1, .1)
/* if (child.material.type = "MeshStandardMaterial") {
child.material.dispose();
scene.remove(child.material)
child.material = new THREE.MeshBasicMaterial({
color: child.material.color.multiplyScalar(5.),
...