<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>webgl three.js first</title>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/three.js/r77/three.min.js"></script>
<!--<script src="bower_components/jquery/dist/jquery.js"></script>-->
<!--<script src="bower_components/three.js/three.js"></script>-->
<script>
$(function(){
var scene=new THREE.object();
var camera=new THREE.perspective(
45,window.innerHeight/window.innerWidth,0.1,1000
);
var renderer=new THREE.WebGLRenderer()
var backgroundcolor=new THREE.Color(0xEEEEE)
renderer.setClearColor(backgroundcolor);
renderer.setSize(window.innerHeight/window.innerWidth)
var planeGeometry=new THREE.planeGeometry(60,20)
var planeMaterial=new THREE.MeshBasicMaterial(
{
color:0xcccccc;
}
)
var plane=new THREE.Mesh(planeGeometry,planeMaterial)
plane.rotation.x=-.5*Math.PI
plane.position.x=15
plane.position.y=0
plane.position.z=0
scene.add(plane)
var cubeGeometry=new THREE,BoxGeometry(2,3,4)
var cubeMaterial=new THREE.MeshBasicMaterial(
{
color:0xff0000
wireframe:true
}
}
)
var cube=new THREE.Mesh(cubeGeometry,cubeMaterial)
cube,position.x=4
cube.position.y=2
cube.posistion z=3
scene.add(cube)
// var squareGeometry=new THREE.squareGeometry(5)
var squareGeometry=new THREE.SpereGeometry(4,20,20)
var squareMaterial=new THREE.MeshBasicMaterial(
{
color:0xff0000
wireframe:false
}
)
var square=new THREE.Mesh(squareGeometry,squareMaterial)
square,position.x=25
square.position.y=40
square.position.z=30
scene.add(square)
camera.position.x=-5
camera.position.y=6
camera.position.z=10
camera LookAt(scene.position)
$(document.body).append(renderer.domElement)
renderer.render(scene,camera)
</script>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>
一堆语法错误，json少逗号，该逗号的地方又没有。多学点js基础，而且这个插件怎么用的自己看api，下面语法没有错误了，但是THREE.object报错
如果本地fiel浏览，要加上http协议，要不无法加载网络资源
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>webgl three.js first</title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/three.js/r77/three.min.js"></script>
<!--<script src="bower_components/jquery/dist/jquery.js"></script>-->
<!--<script src="bower_components/three.js/three.js"></script>-->
<script>
$(function () {
var scene = new THREE.object();
var camera = new THREE.perspective(
45, window.innerHeight / window.innerWidth, 0.1, 1000
);
var renderer = new THREE.WebGLRenderer()
var backgroundcolor = new THREE.Color(0xEEEEE)
renderer.setClearColor(backgroundcolor);
renderer.setSize(window.innerHeight / window.innerWidth)
var planeGeometry = new THREE.planeGeometry(60, 20)
var planeMaterial = new THREE.MeshBasicMaterial(
{
color: 0xcccccc////;
}
)
var plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.rotation.x = -.5 * Math.PI
plane.position.x = 15
plane.position.y = 0
plane.position.z = 0
scene.add(plane)
var cubeGeometry = new THREE.BoxGeometry(2, 3, 4)///////////////
var cubeMaterial = new THREE.MeshBasicMaterial(
{
color: 0xff0000,////////
wireframe: true
}
/// }
)
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube, position.x = 4
cube.position.y = 2
cube.posistion.z = 3//////////
scene.add(cube)
// var squareGeometry=new THREE.squareGeometry(5)
var squareGeometry = new THREE.SpereGeometry(4, 20, 20)
var squareMaterial = new THREE.MeshBasicMaterial(
{
color: 0xff0000,
wireframe: false
}
)
var square = new THREE.Mesh(squareGeometry, squareMaterial)
square, position.x = 25
square.position.y = 40
square.position.z = 30
scene.add(square)
camera.position.x = -5
camera.position.y = 6
camera.position.z = 10
camera.LookAt(scene.position)/////////////
$(document.body).append(renderer.domElement)
renderer.render(scene, camera)
});////////////////
</script>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>