$(function(){
var camera, renderer;
var mpi=Math.PI /180;
var circleRadius = 1800;
var startAngle = 0;
var centerX = 0;
var centerZ = 0;
var startRadians = startAngle + mpi;
var totalSpheres = 5;
var incrementAngle = 360/totalSpheres;
var incrementRadians = incrementAngle * mpi;
var Element = function ( id, w, h, position, rotation ) {
var html = [
'<div class="wrapper" >',
'<ul class="stage clearfix">',
'<li class="scene" >',
'<div class="movie i1" id="' + id + '" >',
'</div>',
'</li>',
'</ul>',
'</div>'
].join('\n');
var div = document.createElement('div');
$(div).html(html);
var object = new THREE.CSS3DObject( div );
object.position.x = position.x;
object.position.y = position.y;
object.position.z = position.z;
object.rotation.x = rotation.x;
object.rotation.y = rotation.y;
object.rotation.z = rotation.z;
return object;
}
init();
function init() {
scene = new THREE.Scene();
var container = document.getElementById( 'container' );
var renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight*.85);
container.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
camera.position.set(-100,60,4000);
var group = new THREE.Group();
var str = {"0": $.ajax({
dataType: "text",
url: "http://localhost/liberate/threeee/PAGES/Information/pages/content.html",
success: function (data) {
console.log(data);
$("#id").append(data);
}}),
"1":$.ajax({
dataType: "text",
url: "http://localhost/liberate/threeee/PAGES/Information/pages/content.html",
success: function (data) {
console.log(data);
$("#attacker").append(data);
}}),
"2":$.ajax({
dataType: "text",
url: "http://localhost/liberate/threeee/PAGES/Information/pages/content.html",
success: function (data) {
console.log(data);
$("#attacker").append(data);
}})
}
for ( var i = 0; i < totalSpheres; i ++ ) {
var xp = centerX + Math.sin(startRadians) * circleRadius;
var zp = centerZ + Math.cos(startRadians) * circleRadius;
group.add( new Element( str, 1000, 1000, new THREE.Vector3(xp, 0, zp), new THREE.Vector3(0, i*incrementAngle * (Math.PI/180.0), 0) ) );
startRadians += incrementRadians;
}
scene.add(group);
renderer.render( scene, camera );
}
});*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body {
background: #fbc73b;
font-family: 'Lato', Arial, sans-serif;
color: #fff;
}
.wrapper {
margin: 0 auto 100px auto;
max-width: 960px;
}
.stage {
list-style: none;
padding: 0;
}
/*************************************
Build the scene and rotate on hover
**************************************/
.scene {
width: 260px;
height: 400px;
margin: 30px;
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.movie {
width: 260px;
height: 400px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-130px);
-moz-transform: translateZ(-130px);
transform: translateZ(-130px);
-webkit-transition: -webkit-transform 350ms;
-moz-transition: -moz-transform 350ms;
transition: transform 350ms;
}
.movie:hover {
-webkit-transform: rotateY(-78deg) translateZ(20px);
-moz-transform: rotateY(-78deg) translateZ(20px);
transform: rotateY(-78deg) translateZ(20px);
}
/*************************************
Transform and style the two planes
**************************************/
.movie .poster,
.movie .info {
position: absolute;
width: 260px;
height: 400px;
background-color: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.movie .poster {
-webkit-transform: translateZ(130px);
-moz-transform: translateZ(130px);
transform: translateZ(130px);
background-size: cover;
background-repeat: no-repeat;
}
.movie .info {
-webkit-transform: rotateY(90deg) translateZ(130px);
-moz-transform: rotateY(90deg) translateZ(130px);
transform: rotateY(90deg) translateZ(130px);
border: 1px solid #B8B5B5;
font-size: 0.75em;
}
/*************************************
Shadow beneath the 3D object
**************************************/
.csstransforms3d .movie::after {
content: '';
width: 260px;
height: 260px;
position: absolute;
bottom: 0;
box-shadow: 0 30px 50px rgba(0,0,0,0.3);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotateX(90deg) translateY(130px);
-moz-transform: rotateX(90deg) translateY(130px);
transform: rotateX(90deg) translateY(130px);
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie:hover::after {
box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}
/*************************************
Movie information
**************************************/
.info header {
color: #FFF;
padding: 7px 10px;
font-weight: bold;
height: 195px;
background-size: contain;
background-repeat: no-repeat;
text-shadow: 0px 1px 1px rgba(0,0,0,1);
}
.info header h1 {
margin: 0 0 2px;
font-size: 1.4em;
}
.info header .rating {
border: 1px solid #FFF;
padding: 0px 3px;
}
.info p {
padding: 1.2em 1.4em;
margin: 2px 0 0;
font-weight: 700;
color: #666;
line-height: 1.4em;
border-top: 10px solid #555;
}
/*************************************
Generate "lighting" using box shadows
**************************************/
.movie .poster,
.movie .info,
.movie .info header {
-webkit-transition: box-shadow 350ms;
-moz-transition: box-shadow 350ms;
transition: box-shadow 350ms;
}
.csstransforms3d .movie .poster {
box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}
.csstransforms3d .movie:hover .poster {
box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}
.csstransforms3d .movie .info,
.csstransforms3d .movie .info header {
box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}
.csstransforms3d .movie:hover .info,
.csstransforms3d .movie:hover .info header {
box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}
/*************************************
Posters and still images
**************************************/
.scene:nth-child(1) .movie .poster {
background-image: url(../img/withoutblur.jpg);
background-size: 260px 400px;
}
.scene:nth-child(2) .poster {
background-image: url(../img/triangulated-image.jpg);
background-size: 260px 400px;
}
.scene:nth-child(3) .poster {
background-image: url(../img/defender.jpg);
background-size: 260px 400px;
}
.scene:nth-child(4) .poster {
background-image: url(../img/defender.jpg);
background-size: 260px 400px;
}
.scene:nth-child(1) .info header {
background-image: url(../img/triangulated.png);
}
.scene:nth-child(2) .info header {
background-image: url(../img/triangulamage.png);
}
.scene:nth-child(3) .info header {
background-image: url(../img/defend.png);
}
.scene:nth-child(4) .info header {
background-image: url(../img/defend.png);
}
/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster,
.no-csstransforms3d .movie .info {
position: relative;
}
/*************************************
Media Queries
**************************************/
@media screen and (max-width: 60.75em){
.scene {
float: none;
margin: 80px auto 80px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>
<div id="container"></div>
我有这个脚本，我在其中为div创建了一个结构，我想动态地向它添加数据。一切都很好，除非每次div都填充相同的数据而不是不同的数据。我想给他们动态的ID。
我制作了3个div并添加了不同网址的数据，但每次数据都显示在同一个div而不是不同的div中。