-
Notifications
You must be signed in to change notification settings - Fork 0
/
convextest.html
100 lines (83 loc) · 3.48 KB
/
convextest.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="2d" style="z-index: 1;position: absolute;left: 0px;top: 0px;"></canvas>
<canvas id="3d"></canvas>
<script type="module">
import * as THREE from './Utils/js/three.module.js';
import { ConvexBufferGeometry } from './Utils/js/mod/ConvexGeometry.js';
import{ toScreenXY } from './Utils/js/mod/f3d_simplify.js';
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(0,2.5,2.5); // Set position like this
var ambientLight = new THREE.AmbientLight( 0x606060 );
scene.add( ambientLight );
var renderer = new THREE.WebGLRenderer({canvas:document.getElementById('3d')});
renderer.setSize( window.innerWidth, window.innerHeight );
scene.background = new THREE.Color( 0xffffff );
document.body.appendChild( renderer.domElement );
var canvas = document.getElementById('2d');
var ctx = canvas.getContext('2d');
var coords2d = [];
var geometry = new THREE.SphereGeometry( 1, 16, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
cube.position.set(3, 0, 0);
cube.updateMatrixWorld();
var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width / 2, heightHalf = height / 2;
var pos = cube.position.clone();
camera.updateMatrixWorld();
pos.project(camera);
pos.x = ( pos.x * widthHalf ) + widthHalf;
pos.y = - ( pos.y * heightHalf ) + heightHalf;
coords2d.push({ x: pos.x, y: pos.y});
var geometry2 = new THREE.SphereGeometry( 2, 16, 16 );
var material2 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube2 = new THREE.Mesh( geometry2, material2 );
scene.add( cube2 );
cube2.position.set(-3, 0, 0);
var pos2 = cube2.position.clone();
cube2.updateMatrixWorld();
pos2.project(camera);
pos2.x = ( pos2.x * widthHalf ) + widthHalf;
pos2.y = - ( pos2.y * heightHalf ) + heightHalf;
coords2d.push({ x: pos2.x, y: pos2.y});
var points = [];
cube.geometry.vertices.map((e)=>{points.push(new THREE.Vector3( e.x, e.y, e.z ).applyMatrix4(cube.matrixWorld))});
cube2.geometry.vertices.map((e)=>{points.push(new THREE.Vector3( e.x, e.y, e.z ).applyMatrix4(cube2.matrixWorld))});
var geometry3 = new ConvexBufferGeometry( points );
var material3 = new THREE.MeshBasicMaterial( {color: 0xff0000, opacity: 0.5,transparent:true} );
var cube3 = new THREE.Mesh( geometry3, material3 );
scene.add( cube3 );
camera.position.z = 5;
/*
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
var textureLoader = new THREE.TextureLoader();
var mapA = textureLoader.load( "./assets/games/demons/dem_A_BO_3_03.png" );
var materialC = new THREE.SpriteMaterial( { map: mapA, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( materialC );
sprite.position.set( 0, 0, 0 );
sprite.scale.set( 1, 1, 0 );
//sprite.position.normalize();
//sprite.position.multiplyScalar( radius );
scene.add( sprite );
*/
ctx.beginPath();
ctx.rect(0, 0, 250, 150);
ctx.stroke();
renderer.render( scene, camera );
//animate();
</script>
</body>
</html>