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

Add material clipping example.

Browse Source
This commit is contained in:
kovacsv 2022-05-29 16:52:23 +02:00
parent 98fc9fcf93
commit e47ccfaa08
2 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
sandbox/three_clipping.html Normal file
View File

@ -0,0 +1,68 @@
<!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>Online 3D Viewer</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.140.2/build/three.min.js"></script>
<script type='text/javascript'>
function Sandbox3D ()
{
let canvas = document.getElementById ('canvas');
let parameters = {
canvas : canvas,
antialias : true
};
let width = 800;
let height = 600;
let renderer = new THREE.WebGLRenderer (parameters);
renderer.setClearColor ('#ffffff', 1);
renderer.setSize (width, height);
renderer.localClippingEnabled = true;
let scene = new THREE.Scene ();
let ambientLight = new THREE.AmbientLight (0x888888);
scene.add (ambientLight);
let light = new THREE.DirectionalLight (0x888888);
light.position.set (3.0, -1.5, 2.0);
scene.add (light);
let camera = new THREE.PerspectiveCamera (45.0, width / height, 0.1, 1000.0);
camera.position.set (3.0, -1.5, 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 box = new THREE.BoxGeometry (1.0, 1.0, 1.0);
let material = new THREE.MeshPhongMaterial ({
color : 0xcc0000,
side : THREE.DoubleSide,
clippingPlanes : [
new THREE.Plane (new THREE.Vector3 (0.0, 0.0, -1.0), 0.0)
]
});
let mesh = new THREE.Mesh (box, material);
scene.add (mesh);
renderer.render (scene, camera);
}
window.onload = function () {
Sandbox3D ();
};
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

2
sandbox/three_minimal.html
View File

@ -7,7 +7,7 @@
<title>Online 3D Viewer</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.130.0/build/three.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.140.2/build/three.min.js"></script>
<script type='text/javascript'>
function Sandbox3D ()
{