<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0;}
canvas { 100%; height: 100% }
</style>
</head>
<body>
<script src="./three.min.js"></script>
<script>
// 地理图点着色器的使用
var VSHADER_SOURCE = function(){
/*
attribute vec3 custom_color;
varying vec4 vColor;
void main() {
vColor = vec4(custom_color, 1.0);
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
*/
}.toString().match(//*([^]*)*//)[1];
var FSHADER_SOURCE = function(){
/*
varying vec4 vColor;
void main() {
if (vColor.r > 0.5){
gl_FragColor = vec4(1.0, 0, 0, 1.0);
}else{
gl_FragColor = vec4(0, 0, 1.0, 1.0);
}
}
*/
}.toString().match(//*([^]*)*//)[1];
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75,
window.innerWidth/window.innerHeight,
0.1,
1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BufferGeometry();
var positions = [];
var temp_position = new THREE.Vector3();
temp_position.set( -10, 0, 0 );
positions.push(temp_position.x);
positions.push(temp_position.y);
positions.push(temp_position.z);
temp_position.set( 10, 0, 0 );
positions.push(temp_position.x);
positions.push(temp_position.y);
positions.push(temp_position.z);
var custom_color = [];
var temp_color = new THREE.Color();
temp_color.setHex(0xFF0000);
custom_color.push(temp_color.r);
custom_color.push(temp_color.g);
custom_color.push(temp_color.b);
temp_color.setHex(0x0000FF);
custom_color.push(temp_color.r);
custom_color.push(temp_color.g);
custom_color.push(temp_color.b);
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array( positions), 3));
geometry.addAttribute('custom_color', new THREE.BufferAttribute(new Float32Array( custom_color), 3));
var line_material = new THREE.ShaderMaterial({
vertexShader: VSHADER_SOURCE,
fragmentShader: FSHADER_SOURCE,
depthTest: true,
transparent: true
});
var line = new THREE.Line( geometry, line_material );
scene.add( line );
camera.position.z = 20;
var animate = function () {
renderer.render(scene, camera);
requestAnimationFrame( animate );
};
animate();
</script>
</body>
</html>
