naveenrobo/threejs-skull.html

## threejs-skull.html
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="./js/Detector.js"></script>
    <script src="./js/three.js"></script>
    <script src="./js/loaders/LoaderSupport.js"></script>
    <script src="./js/loaders/OBJLoader2.js"></script>
    <script src="./js/controls/OrbitControls.js"></script>
    <style>
        body {
            background-color: #ffffff;
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

    <script>
        if (!Detector.webgl) Detector.addGetWebGLMessage();
        var camera, scene, renderer;
        var mouseX = 0, mouseY = 0;
        var points, obj;
        var scale = 6;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();

        function createCircleTexture(color, size) {
            var matCanvas = document.createElement('canvas');
            matCanvas.width = matCanvas.height = size;
            var matContext = matCanvas.getContext('2d');
            // create texture object from canvas.
            var texture = new THREE.Texture(matCanvas);
            // Draw a circle
            var center = size / 2;
            matContext.beginPath();
            matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
            matContext.closePath();
            matContext.fillStyle = color;
            matContext.fill();
            // need to set needsUpdate
            texture.needsUpdate = true;
            // return a texture made from the canvas
            return texture;
        }
        function init() {
            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.z = 600;

            scene = new THREE.Scene();
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(0x000000, 0);
            document.body.appendChild(renderer.domElement);

            window.addEventListener('resize', onWindowResize, false);
            document.addEventListener('mousemove', onDocumentMouseMove, false);

            var manager = new THREE.LoadingManager();
            manager.onProgress = function (url, itemsLoaded, itemsTotal) {
                console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
            };

            var geometry = new THREE.Geometry();
            var particle_material = new THREE.PointsMaterial({
                //color: 0xFFFFFF, //white
                size: 1.5,
                map: createCircleTexture('#FFFFFF', 256),
                transparent: true
            });
            // map: createCircleTexture('#FFFFFF', 256),
            points = new THREE.Points(geometry, particle_material);
            controls = new THREE.OrbitControls(camera, renderer.domElement);

            //Using OBJLoader2 instead of OBJLoader
            var loader = new THREE.OBJLoader2(manager);
            //https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/head.obj
            loader.load('./3d/skull.obj', callbackOnLoad, null, null, null, false);

            // function called on successful load
            function callbackOnLoad(object) {
                let root = object.detail.loaderRootNode;
                root.traverse(function (child) {
                    obj = child;
                    if (child instanceof THREE.Mesh) {
                        var geo = new THREE.Geometry().fromBufferGeometry(child.geometry);
                        $(geo.vertices).each(function () {
                            geometry.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale));
                        });
                    }
                });
                scene.add(points);
            };
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function onDocumentMouseMove(event) {
            mouseX = (event.clientX - windowHalfX);
            mouseY = (event.clientY - windowHalfY);
        }

        //logic
        function update() {
            //mesh.rotation.x += 0.01;
            //mesh.rotation.y += 0.005;
        }

        //draw Scene
        function render() {
            renderer.render(scene, camera);
        }

        //update, render, repeat
        function loop() {
            requestAnimationFrame(loop);
            update();
            camera.position.x += (mouseX - camera.position.x) * .05;
            camera.position.y = THREE.Math.clamp(camera.position.y + (- (mouseY - 200) - camera.position.y) * .05, 50, 1000);
            camera.lookAt(scene.position);
            render();
        }
        loop();
    </script>

</body>

</html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="./js/Detector.js"></script>
	<script src="./js/three.js"></script>
	<script src="./js/loaders/LoaderSupport.js"></script>
	<script src="./js/loaders/OBJLoader2.js"></script>
	<script src="./js/controls/OrbitControls.js"></script>
	<style>
	body {
	background-color: #ffffff;
	margin: 0;
	overflow: hidden;
	}

	canvas {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>

	<script>
	if (!Detector.webgl) Detector.addGetWebGLMessage();
	var camera, scene, renderer;
	var mouseX = 0, mouseY = 0;
	var points, obj;
	var scale = 6;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	init();

	function createCircleTexture(color, size) {
	var matCanvas = document.createElement('canvas');
	matCanvas.width = matCanvas.height = size;
	var matContext = matCanvas.getContext('2d');
	// create texture object from canvas.
	var texture = new THREE.Texture(matCanvas);
	// Draw a circle
	var center = size / 2;
	matContext.beginPath();
	matContext.arc(center, center, size / 2, 0, 2 * Math.PI, false);
	matContext.closePath();
	matContext.fillStyle = color;
	matContext.fill();
	// need to set needsUpdate
	texture.needsUpdate = true;
	// return a texture made from the canvas
	return texture;
	}
	function init() {
	camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.z = 600;

	scene = new THREE.Scene();
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor(0x000000, 0);
	document.body.appendChild(renderer.domElement);

	window.addEventListener('resize', onWindowResize, false);
	document.addEventListener('mousemove', onDocumentMouseMove, false);

	var manager = new THREE.LoadingManager();
	manager.onProgress = function (url, itemsLoaded, itemsTotal) {
	console.log('Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.');
	};

	var geometry = new THREE.Geometry();
	var particle_material = new THREE.PointsMaterial({
	//color: 0xFFFFFF, //white
	size: 1.5,
	map: createCircleTexture('#FFFFFF', 256),
	transparent: true
	});
	// map: createCircleTexture('#FFFFFF', 256),
	points = new THREE.Points(geometry, particle_material);
	controls = new THREE.OrbitControls(camera, renderer.domElement);

	//Using OBJLoader2 instead of OBJLoader
	var loader = new THREE.OBJLoader2(manager);
	//https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/head.obj
	loader.load('./3d/skull.obj', callbackOnLoad, null, null, null, false);

	// function called on successful load
	function callbackOnLoad(object) {
	let root = object.detail.loaderRootNode;
	root.traverse(function (child) {
	obj = child;
	if (child instanceof THREE.Mesh) {
	var geo = new THREE.Geometry().fromBufferGeometry(child.geometry);
	$(geo.vertices).each(function () {
	geometry.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale));
	});
	}
	});
	scene.add(points);
	};
	}

	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	function onDocumentMouseMove(event) {
	mouseX = (event.clientX - windowHalfX);
	mouseY = (event.clientY - windowHalfY);
	}

	//logic
	function update() {
	//mesh.rotation.x += 0.01;
	//mesh.rotation.y += 0.005;
	}

	//draw Scene
	function render() {
	renderer.render(scene, camera);
	}

	//update, render, repeat
	function loop() {
	requestAnimationFrame(loop);
	update();
	camera.position.x += (mouseX - camera.position.x) * .05;
	camera.position.y = THREE.Math.clamp(camera.position.y + (- (mouseY - 200) - camera.position.y) * .05, 50, 1000);
	camera.lookAt(scene.position);
	render();
	}
	loop();
	</script>

	</body>

	</html>