代碼是這樣的
<!DOCTYPE html>
<html>
<head>
<title>Example 01.01 - Basic skeleton</title>
<meta charset="UTF-8" />
<script type="text/javascript" charset="UTF-8" src="https://bbs.csdn.net/libs/three/three.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://bbs.csdn.net/libs/three/controls/TrackballControls.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/src/chapter-01/test.js"></script>
<link rel="stylesheet" href="https://bbs.csdn.net/css/default.css">
</head>
<body>
<!-- Div which will hold the Output -->
<div id="webgl-output"></div>
<!-- Javascript code that runs our Three.js examples -->
</body>
</html>
function init() {
var stats = initStats();
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
// show axes in the screen
var axes = new THREE.AxesHelper(20);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(50, 10, 1, 1);
// 圖片加載器
var ImageLoader = new THREE.ImageLoader();
// load方法回呼函式,按照路徑加載圖片,回傳一個html的元素img物件
ImageLoader.load('../src/chapter-01/image/6.png', function(img) {
// image物件作為引數,創建一個紋理物件Texture
var texture = new THREE.Texture(img);
// 下次使用紋理時觸發更新
texture.needsUpdate = true;
var material = new THREE.MeshLambertMaterial({
map: texture, //設定紋理貼圖
});
var mesh = new THREE.Mesh(planeGeometry, material); //網格模型物件Mesh
scene.add(mesh); //網格模型添加到場景中
});
}
通過本地http://localhost:8081/src/chapter-01/test.html 訪問后一片空白
似乎不運行
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/13733.html
標籤:JavaScript
