129 lines
3.2 KiB
HTML
129 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
|
|
<title>Example</title>
|
|
|
|
<style>
|
|
html, body
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
canvas
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<script type='text/javascript'>
|
|
function Sandbox3D ()
|
|
{
|
|
let canvas = document.getElementById ('canvas');
|
|
|
|
let parameters = {
|
|
canvas : canvas,
|
|
antialias : true
|
|
};
|
|
|
|
let renderer = new THREE.WebGLRenderer (parameters);
|
|
renderer.setClearColor ('#ffffff', 1);
|
|
|
|
let width = document.body.clientWidth;
|
|
let height = document.body.clientHeight;
|
|
renderer.setSize (width, height);
|
|
|
|
let scene = new THREE.Scene ();
|
|
|
|
let camera = new THREE.PerspectiveCamera (45.0, width / height, 0.1, 1000.0);
|
|
camera.position.set (0.0, 6.0, 2.0);
|
|
camera.up.set (0.0, 0.0, 1.0);
|
|
camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
|
|
scene.add (camera);
|
|
|
|
let ambientLight = new THREE.AmbientLight (0x888888);
|
|
scene.add (ambientLight);
|
|
|
|
let light = new THREE.DirectionalLight (0x888888);
|
|
light.position.copy (camera.position);
|
|
scene.add (light);
|
|
|
|
let rgb = [0, 197, 237];
|
|
let baseColor = new THREE.Color (rgb[0] / 255.0, rgb[1] / 255.0, rgb[2] / 255.0);
|
|
|
|
let phongGeometry = new THREE.SphereGeometry (1.0, 32, 16);
|
|
let phongMaterial = new THREE.MeshPhongMaterial ({
|
|
color : baseColor
|
|
});
|
|
|
|
let standardGeometry = new THREE.SphereGeometry (1.0, 32, 16);
|
|
let standardMaterial = new THREE.MeshStandardMaterial ({
|
|
color : baseColor,
|
|
metalness : 0.0,
|
|
roughness : 0.0
|
|
});
|
|
|
|
let emissiveRgb = [0, 0, 0];
|
|
let emissiveColor = new THREE.Color (emissiveRgb[0] / 255.0, emissiveRgb[1] / 255.0, emissiveRgb[2] / 255.0);
|
|
phongMaterial.emissive = emissiveColor;
|
|
standardMaterial.emissive = emissiveColor;
|
|
|
|
let phongMesh = new THREE.Mesh (phongGeometry, phongMaterial);
|
|
phongMesh.position.set (1.5, 0.0, 0.0);
|
|
|
|
let standardMesh = new THREE.Mesh (standardGeometry, standardMaterial);
|
|
standardMesh.position.set (-1.5, 0.0, 0.0);
|
|
|
|
scene.add (phongMesh);
|
|
scene.add (standardMesh);
|
|
renderer.render (scene, camera);
|
|
|
|
let envMaps = [
|
|
'envmap/posx.jpg',
|
|
'envmap/negx.jpg',
|
|
'envmap/posy.jpg',
|
|
'envmap/negy.jpg',
|
|
'envmap/posz.jpg',
|
|
'envmap/negz.jpg'
|
|
];
|
|
|
|
let loader = new THREE.CubeTextureLoader ();
|
|
scene.environment = loader.load (envMaps, () => {
|
|
renderer.render (scene, camera);
|
|
});
|
|
|
|
window.onresize = function () {
|
|
let width = document.body.clientWidth;
|
|
let height = document.body.clientHeight;
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix ();
|
|
renderer.setSize (width, height);
|
|
renderer.render (scene, camera);
|
|
};
|
|
}
|
|
|
|
window.onload = function () {
|
|
let scriptElement = document.createElement ('script');
|
|
scriptElement.type = 'text/javascript';
|
|
scriptElement.src = window.location.hash.substr (1);
|
|
scriptElement.onload = () => {
|
|
Sandbox3D ();
|
|
};
|
|
document.head.appendChild (scriptElement);
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
</body>
|
|
|
|
</html>
|