Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add code for envmap issue.

Browse Source
This commit is contained in:
kovacsv 2021-10-29 07:30:09 +02:00
parent 8e387f0e32
commit c49a8d0319
9 changed files with 180 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
sandbox/three_envmap_issue/envmap/negx.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
sandbox/three_envmap_issue/envmap/negy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
sandbox/three_envmap_issue/envmap/negz.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
sandbox/three_envmap_issue/envmap/posx.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
sandbox/three_envmap_issue/envmap/posy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
sandbox/three_envmap_issue/envmap/posz.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

13
sandbox/three_envmap_issue/envmap/readme.txt Normal file
View File

@ -0,0 +1,13 @@
Author
======
This is the work of Emil Persson, aka Humus.
http://www.humus.name
License
=======
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
http://creativecommons.org/licenses/by/3.0/

39
sandbox/three_envmap_issue/envmap_issue.html Normal file
View File

@ -0,0 +1,39 @@
<!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
{
font-family: Arial, Helvetica, sans-serif;
}
iframe
{
border: 1px solid #cccccc;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div>r130:</div>
<div>
<iframe width="400" height="300" src="three_viewer.html#https://cdn.jsdelivr.net/npm/three@0.130.0/build/three.min.js"></iframe>
</div>
<div>r131:</div>
<div>
<iframe width="400" height="300" src="three_viewer.html#https://cdn.jsdelivr.net/npm/three@0.132.0/build/three.min.js"></iframe>
</div>
</body>
</html>

128
sandbox/three_envmap_issue/three_viewer.html Normal file
View File

@ -0,0 +1,128 @@
<!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>