JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<!--
This is a demo of loading an isosurface geometry for
three.js generated by the contourist package.
https://github.com/AaronWatters/contourist
-->
<div id="WebGL-output">
</div>
JavaScript
// once everything is loaded, we run our Three.js stuff.
debugger;
function init() {
debugger;
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xdddddd, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
// position and point the camera to the center of the scene
camera.position.x = -5;
camera.position.y = 4;
camera.position.z = 6;
camera.lookAt(new THREE.Vector3(0, 0, 0));
// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-50, 70, 60);
spotLight.intensity = 1;
scene.add(spotLight);
// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
// call the render function
var step = 0;
var mesh;
var clock = new THREE.Clock();
var loader = new THREE.JSONLoader();
//var filename = "centered.js"; // "square.json";
var filename = "https://raw.githubusercontent.com/AaronWatters/contourist/master/misc/json2.js";
loader.load(filename, function (geometry, mat) {
debugger;
// geometry.computeFaceNormals();
// geometry.computeVertexNormals();
var mat = new THREE.MeshNormalMaterial();
//mat.side = THREE.DoubleSide;
//mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [mat]);;
//mesh.rotation.y = 0.7;
...